<template>
  <div>
    <van-nav-bar title="充电订单" left-text="返回" left-arrow @click-left="onClickLeft"/>
  </div>
  <van-tabs v-model:active="active" @click-tab="onClickTab">
    <van-tab title="待付款" name="0"></van-tab>
    <van-tab title="待评论" name="1"></van-tab>
    <van-tab title="已完成" name="2"></van-tab>
  </van-tabs>
  <div v-for="item in chargingRecordList" :key="item.id"
       style="margin-top: 10px;margin-right: 10px;margin-left: 18px;background-color:rgb(247, 248, 250);border-radius: 3%;" @click="goPay(item)">
    <div style="margin-top: 10px;padding-top: 10px;">
      <span style="font-size: 16px;font-weight: 600;color: rgb(50, 50, 51)">终端设备号:</span> <span
        style="color: rgb(150, 151, 153)">{{ item.gunNo }}</span>
    </div>
    <div style="margin-top: 10px;">
      <span style="font-size: 16px;font-weight: 600;color: rgb(50, 50, 51)">站点名称:</span> <span
        style="color: rgb(150, 151, 153)">{{ item.stationName }}</span>
    </div>
    <div style="margin-top: 10px;">
      <span style="font-size: 16px;font-weight: 600;color: rgb(50, 50, 51)">充电时间:</span> <span
        style="color: rgb(150, 151, 153)">{{ item.createTimeStr }}</span>
      </div>
    <div style="margin-top: 10px;padding-bottom: 10px;">
      <span style="font-size: 16px;font-weight: 600;color: rgb(50, 50, 51)">总费用:</span> <span
        style="color: red">{{ item.amountStr }}</span>
      </div>
  </div>


</template>
<script setup>
import {ref} from 'vue'
import {ChargingRecordList} from "@/api/station";
import {showDialog} from "vant";
import router from "@/router";

const onClickLeft = () => history.back();
const active = ref(0)

const chargingRecordList = ref([]);

const onClickTab = ({name}) => getUserCouponInf(name);

const queryM = ref({
  pageNum: 1,
  pageSize: 10,
  payStatus: 0
})

initData(0);

function initData(data) {
  queryM.value.payStatus = data;
  ChargingRecordList(queryM.value).then(res => {
    if (res.data.code === 200000) {
      chargingRecordList.value = res.data.data.data;
    } else {
      showDialog({message: res.data.message});
    }
  }).catch(() => {
    showDialog({message: '系统繁忙，请稍后再试'});
  });
}


function getUserCouponInf(data) {
  initData(data)
}

const chargingMoney = ref(0);
const chargingRecordId = ref(0);

function goPay(item) {
  if (item.payStatus !== 0) {
    return;
  }
  chargingMoney.value = item.amount;
  chargingRecordId.value = item.id;
  router.push({
    path: '/user/charging/order/pay',
    query: {chargingRecordId: chargingRecordId.value, chargingMoney: chargingMoney.value}
  });
}
</script>